<!DOCTYPE html>
<html x-ng-app="create">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="../static/images/favicon.ico" />
<script src="../static/lib/jquery/js/jquery-1.9.1.min.js"></script>
<link href="../static/lib/jquery/css/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" media="screen">
<script src="../static/lib/jquery/js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="../static/lib/angular/js/angular.min.js"></script>
<script src="../static/lib/bs/2.3.2/js/bootstrap.min.js"></script>
<link href="../static/lib/bs/2.3.2/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="../static/js/project/create.js"></script>
<link href="../static/css/index.css" rel="stylesheet" media="screen">
<link href="../static/css/common.css" rel="stylesheet" media="screen">
<link href="../static/css/project/create.css" rel="stylesheet" media="screen">
<title>Delivery Management</title>
</head>
<body>
  <div id="overlay" style="display: none">
    <div id="modal">&nbsp;</div>
    <div id="loading-indicator" style="display: none">Processing...</div>
  </div>
  <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
        </button>
        <a class="brand" href="#">DMDB</a>
        <div class="nav-collapse collapse">
          <ul class="nav">
            <li><a href="#">Dash Board</a></li>
            <li class="dropdown active"><a href="#pricing" class="dropdown-toggle" data-toggle="dropdown">Project Management<b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="/qs">Projects</a></li>
                <li><a href="#">Requests</a></li>
                <li><a href="#">Orders</a></li>
                <li><a href="#">Sites</a></li>
              </ul></li>
            <li><a href="#">Administration</a></li>
          </ul>
          <form class="navbar-form pull-right">
            <input type="text" class="form-control col-lg-8" placeholder="Search"> <select name="omniSearch" id="omniSearch" class="input-small">
              <option value="project">Projects</option>
              <option value="order">Orders</option>
              <option value="site">Sites</option>
            </select>
          </form>
        </div>
      </div>
    </div>
  </div>
  <div style="padding-top: 50px;"></div>
  <div class="container-fluid">
    <form class="form-horizontal dmdb-block" id="createProjectForm" x-ng-controller="createCntrl">
      <div class="dmdb-block-title" data-toggle="collapse" href="#projectDiv">
        <div class="padding-left-5">
          Project Details <i class="icon-circle-arrow-down icon-white"></i>
        </div>
      </div>
      <div id="projectDiv" class="projectDiv">
        <div class="row-fluid">
          <div class="span12">
            <div class="row-fluid">
              <div class="span6 left-divider">
                <div class="row-fluid">
                  <div class="control-group span6">
                    <label class="control-label" for="requestId">Request Id:</label>
                    <div class="controls">
                      <select id="requestId" name="serviceRequestId" x-ng-model="project.serviceRequestId">
                        <option value="">Select</option>
                        <option value="1">48020</option>
                        <option value="2">58020</option>
                      </select>
                    </div>
                  </div>
                  <div class="control-group span6">
                    <label class="control-label" for="projectId">Project Id:</label> <label class="valueLabel">{{project.id}}</label>
                  </div>
                </div>
                <div class="row-fluid">
                  <div class="control-group span6">
                    <label class="control-label" for="projectName">Project Name:</label>
                    <div class="controls">
                      <input type="text" name="name" id="projectName" placeholder="Project Name" x-ng-model="project.name" />
                    </div>
                  </div>
                  <div class="control-group span6">
                    <label class="control-label" for="projectReference">Project Reference:</label>
                    <div class="controls">
                      <input type="text" name="reference" id="projectReference" placeholder="Project Reference" x-ng-model="project.reference" />
                    </div>
                  </div>
                </div>
                <div class="row-fluid">
                  <div class="">
                    <div class="control-group span6">
                      <label class="control-label" for="customerName">Customer Name:</label>
                      <div class="controls">
                        <input type="text" name="custName" id="customerName" placeholder="Customer Name" x-ng-model="project.custId" />
                      </div>
                    </div>
                  </div>
                  <div class="control-group span6">
                    <label class="control-label" for="status">Status:</label> <label class="valueLabel">{{project.status}}</label>
                  </div>
                </div>
                <div class="row-fluid">
                  <div class="control-group span12">
                    <label class="control-label" for="description">Description:</label>
                    <div class="controls">
                      <textarea name="description" id="description" rows="2" x-ng-model="project.description"></textarea>
                    </div>
                  </div>
                </div>
                <div class="row-fluid">
                  <div class="control-group span6">
                    <label class="control-label" for="plannedStartDate">Planned Start Date:</label>
                    <div class="controls">
                      <div class="input-append date">
                        <input name="plannedStartDate" placeholder="dd-mon-yyyy" id="plannedStartDate" type="text" x-ng-model="project.plannedStartDate" datepicker />
                        <span class="add-on trigger"> <i class="icon-calendar"> </i></span>
                      </div>
                    </div>
                  </div>
                  <div class="control-group span6">
                    <label class="control-label" for="actualStartDate">Actual Start Date:</label>
                    <div class="controls">
                      <div class="input-append date">
                        <input name="actualStartDate" x-ng-model="project.actualStartDate" placeholder="dd-mon-yyyy" id="actualStartDate" type="text"  datepicker/>
                        <span class="add-on trigger"> <i class="icon-calendar"> </i></span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row-fluid">
                  <div class="control-group span6">
                    <label class="control-label" for="plannedEndDate">Planned End Date:</label>
                    <div class="controls">
                      <div class="input-append date">
                        <input name="plannedEndDate" x-ng-model="project.plannedEndDate" placeholder="dd-mon-yyyy" id="plannedEndDate" type="text" datepicker />
                        <span class="add-on trigger"> <i class="icon-calendar"> </i></span>
                      </div>
                    </div>
                  </div>
                  <div class="control-group span6">
                    <label class="control-label" for="actualEndDate">Actual End Date:</label>
                    <div class="controls">
                      <div class="input-append date">
                        <input name="actualEndDate" x-ng-model="project.actualEndDate" placeholder="dd-mon-yyyy" id="actualEndDate" type="text" datepicker />
                        <span class="add-on trigger"> <i class="icon-calendar"> </i></span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row-fluid">
                  <div class="">
                    <div class="control-group span6">
                      <label class="control-label" for="plannedDuration">Planned Duration:</label> <label class="valueLabel">10 days</label>
                    </div>
                  </div>
                  <div class="control-group span6">
                    <label class="control-label" for="actualDuration">Actual Duration:</label> <label class="valueLabel">10 days</label>
                  </div>
                </div>
                <div class="row-fluid">
                  <div class="control-group span6">
                    <label class="control-label" for="customerRequiredDate">Customer Required Date:</label>
                    <div class="controls">
                      <div class="input-append date">
                        <input name="" placeholder="dd-mon-yyyy" id="customerRequiredDate" type="text" />
                        <span class="add-on trigger"> <i class="icon-calendar"> </i></span>
                      </div>
                    </div>
                  </div>
                  <div class="control-group span6">
                    <label class="control-label" for="changedBy">Changed by:</label>
                    <div class="controls">
                      <div class="btn-group" data-toggle="buttons-radio">
                        <button type="button" class="btn">BT</button>
                        <button type="button" class="btn">Customer</button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row-fluid">
                  <div class="control-group span12">
                    <label class="control-label" for="reasonForChange">Reason for change:</label>
                    <div class="controls">
                      <textarea name="" id="reasonForChange" rows="2"></textarea>
                    </div>
                  </div>
                </div>
                <div class="row-fluid">
                  <div class="control-group span12 padding-right-10">
                    <button type="button" id="clearProject" class="btn pull-right">Clear</button>
                    <button type="button" x-ng-click="create(project)" id="createProject" class="btn btn-primary pull-right margin-right-10">Save Details</button>
                  </div>
                </div>
              </div>
              <div class="span6">
                <div class="row-fluid">
                  <div class="control-group span6">
                    <label class="control-label">RAG Status:</label> <label class="valueLabel"><span class="label label-success">{{project.ragStatus}}</span></label>
                  </div>
                  <div class="control-group span6">
                    <label class="control-label" for="managerRag">Manager RAG:</label>
                    <div class="controls">
                      <select name="managerRagStatus" id="managerRagId" x-ng-model="project.managerRagStatus">
                        <option value="select">Select</option>
                        <option value="Green" selected="selected">Green</option>
                        <option value="Amber">Amber</option>
                        <option value="Red">Red</option>
                      </select>
                    </div>
                  </div>
                </div>
                <div class="row-fluid">
                  <div class="control-group span12">
                    <label class="control-label" for="notes">Project Notes:</label>
                    <div class="controls">
                      <textarea name="" id="notes" rows="2"></textarea>
                    </div>
                  </div>
                </div>
                <div class="row-fluid">
                  <div class="control-group span12 padding-right-10">
                    <button type="button" id="addNotes" class="btn pull-right">Add</button>
                  </div>
                </div>
                <div class="row-fluid">
                  <table class="table table-hover table-bordered">
                    <thead>
                      <tr>
                        <th>#</th>
                        <th>Date</th>
                        <th>Added by</th>
                        <th>Note</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>1</td>
                        <td>08-13-2013</td>
                        <td>Mark Hunkin</td>
                        <td>Project has begun</td>
                      </tr>
                      <tr>
                        <td>2</td>
                        <td>08-12-2013</td>
                        <td>Richard Hoggett</td>
                        <td>Project has been approved</td>
                      </tr>
                      <tr>
                        <td>3</td>
                        <td>08-11-2013</td>
                        <td>Chris Roger</td>
                        <td>Project awaiting customer approval</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</body>
</html>